import React from 'react';
import Modal from '../../Modal';
import { CalculationDebugInfo } from '../../../types';

interface CalculationDebugModalProps {
  debugInfo: CalculationDebugInfo | null;
  onClose: () => void;
}

const CalculationDebugModal: React.FC<CalculationDebugModalProps> = ({ debugInfo, onClose }) => {
  if (!debugInfo) return null;

  return (
    <Modal
      isOpen={true}
      onClose={onClose}
      title="计算助手AI规划与结果"
      footer={
        <div className="flex justify-end">
          <button
            onClick={debugInfo.onContinue}
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white"
          >
            继续执行
          </button>
        </div>
      }
    >
      <div className="space-y-4">
        <div>
          <h4 className="text-md font-semibold text-gray-300 mb-2">AI规划 (Plan)</h4>
          <p className="text-xs text-gray-400 mb-2">AI为下一步生成了以下执行规划：</p>
          <pre className="text-xs bg-gray-900 p-2 rounded overflow-x-auto max-h-[30vh] whitespace-pre-wrap break-all">
            {JSON.stringify(debugInfo.plan, null, 2)}
          </pre>
        </div>
        <div>
          <h4 className="text-md font-semibold text-gray-300 mb-2">函数执行结果 (Results)</h4>
          <p className="text-xs text-gray-400 mb-2">系统执行上述规划后返回的计算结果：</p>
          <pre className="text-xs bg-gray-900 p-2 rounded overflow-x-auto max-h-[30vh] whitespace-pre-wrap break-all">
            {debugInfo.results}
          </pre>
        </div>
      </div>
    </Modal>
  );
};

export default CalculationDebugModal;
